<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" :width="adaptiveWidth" @ok="handleSubmit"
    :showFooter="showFooter" destroyOnClose>
    <!-- 抽屉内容，展示审批详情 -->
    <div>
      <!-- 个人信息和流程 -->
      <div>
        <a-card style="width: 100%; border-radius: 20px;box-shadow: 10px;">
          <a-row style="width: 100%;">
            <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">
              <div class="col-container1">
                <img :src="recordDetail.userInfo?.avatar ? recordDetail.userInfo?.avatar : ''"
                  style="width:50px;height: 50px;" alt=""><br />
                <span>{{ recordDetail.checkrecord?.subUserName }}</span>
              </div>
            </a-col>
            <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
              <div class="col-container2">
                <div style="text-align: left;">
                  <span style="font-weight: bolder;margin-right: 5px;">{{ recordDetail.checkrecord.nodeId
                  }}</span>
                </div>
                <span class="bottom" style="margin-top:15px;">编号:{{ recordDetail.checkrecord.recordId }}</span>
              </div>
            </a-col>
            <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4" style="margin-left: 50px;">
              <div style=" display: flex; align-items: center;margin: 15px;padding-top: 15px;">
                <div style="font-size: 30px ;margin-right: 25px;">
                  <a-tag v-if="recordDetail.checkrecord.recordState == `1`" color="blue">进行中</a-tag>
                  <a-tag v-if="recordDetail.checkrecord.recordState == `2`" color="yellow">正常完成</a-tag>
                  <a-tag v-if="recordDetail.checkrecord.recordState == `3`" color="red">驳回结束</a-tag>
                </div>
                <printer-outlined style="font-size: 30px ;margin-right: 25px;" />
                <qrcode-outlined style="font-size: 30px;margin-right: 25px;" />
              </div>
            </a-col>
          </a-row>
        </a-card>
      </div>
      <!-- 显示审批节点信息  -->
      <div v-show="ifShowDetail == 1">
        <a-divider style="height: 5px;background-color: rgb(240 242 245)" />
        <!-- 审批表单信息 -->
        <div class="col-container3">
          <div>
            <h1 style="margin:35px;font-weight:800;font-size:25px">审批信息(当前节点):(表单数据)</h1>
            <!-- <form-create :rule="recordDetail.formRule" :option="recordDetail.option" :disabled="true"
              style="position: relatidirectionve;left: -35px;"></form-create> -->

          </div>
        </div>
        <a-divider style="height: 5px; background-color: rgb(240 242 245)" />
        <!-- 工作流节点信息 -->
        <div style="margin: 45px;">
          <a-steps :current="recordDetail.current" direction="vertical" type="navigation">
            <a-step v-for="(node, index) in recordDetail.checkNodeList" :key="node.id"
              style="border:none;margin-bottom: 15px;display: flex;align-items: center;">
              <template #icon>
                <div style="width: 65px;height: 100%;position: relative;text-align: center;">
                  <img src="" alt="">
                  <i><check-circle-two-tone two-tone-color="#52c41a"
                      style="position: absolute; right: 10px; bottom: 0px;font-size:15px"
                      v-show="index < recordDetail.current" /></i>
                  <i><clock-circle-outlined two-tone-color="#52c41a"
                      style="position: absolute; right: 10px; bottom: 0px;font-size:15px"
                      v-show="index >= recordDetail.current" /></i>
                </div>
              </template>
              <template #title>
                <div
                  style="width: 350px;display: flex;position: relative;left: 50px;font-size: 15px;font-weight: 550;margin-top: 5px;">
                  <span>{{ node.type }}({{ node.properties.sonType }})</span>
                </div>
              </template>
              <template #description>
                <!-- border:1px solid black; -->
                <div
                  style="width: 500px;heignt:40px;display: flex;position: relative;left: 50px;margin-top: 15px;font-size: 12px;">
                  <span>{{ node.properties.signType }}</span>
                  <span style="position: absolute;right: 125px;bottom: 0;">{{ node.properties.createTime }}</span>
                </div>
              </template>
              <!-- <div style="width: 10px;background-color: aqua;height:25px"></div> -->
            </a-step>
          </a-steps>
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref, useAttrs, reactive, onMounted, toRaw } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { saveOrUpdate, getUserRoles, getUserDepartList, getFlowNodes } from '../myChecked.api';
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
import { CommentOutlined, PrinterOutlined, QrcodeOutlined, DownOutlined, AppstoreOutlined, CheckCircleTwoTone, ClockCircleOutlined } from '@ant-design/icons-vue'
import { useUserStore } from '/@/store/modules/user';
import img from '/@/assets/images/header.jpg';
import { MenuProps, Avatar } from 'ant-design-vue';
import { BasicModal, useModal } from '/@/components/Modal';
import { checkType } from '../myChecked.data';
import { useWorkStore } from '/@/store/modules/work';
import { flattenNodes } from '../../../../../hooks/nss/nodeList';
import { NodeTypes1, SonTypeEnums } from '../../../flow/work/work.data';
const store = useWorkStore()
const step = ref(null)
const props = defineProps({
  extendConfig: { type: Array, default: () => [] },
});
// const { userInfo } = useUserStore()
// console.log('用户信息', userInfo);
const ifShowDetail = ref(1)

const recordDetail = reactive({
  userInfo: {},
  checkrecord: {},
  formRule: [

    {
      type: "input",
      title: "审核人",
      field: "goods_name",
      value: "iphone 7",
      props: {
        type: "text",
      },
      validate: [
        { required: true, message: '请输入审核人', trigger: 'blur' },
      ],
    },
    {
      type: "upload",
      field: "pic",
      title: "图片",
      value: [
        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      ],
      props: {
        action: "/upload.php",
        limit: 2
      },

    },
    {
      type: "upload",
      field: "pic",
      title: "文件",
      value: [

      ],
      props: {
        action: "/upload.php",
        limit: 2
      },

    },


  ],
  checkNodeData: {},
  nodeFormData: {},
  checkNodeList: [
    // {
    //   id: 1,
    //   userName: '张三',
    //   Avatar: '',
    //   time: '2023-03-09 18:34:48',
    //   checkStatus: '已同意',
    //   level: 0,
    // },
    // {
    //   id: 2,
    //   userName: '张三',
    //   Avatar: '',
    //   time: '2023-03-09 18:34:48',
    //   checkStatus: '已同意',
    //   level: 1,
    // },
    // {
    //   id: 3,
    //   userName: '张三',
    //   Avatar: '',
    //   time: '2023-03-09 18:34:48',
    //   checkStatus: '已同意',
    //   level: 2,
    // }
  ],
  option: {},
  // option: {
  //   submitBtn: {
  //     show: false,
  //   },
  //   form: {
  //     hideRequiredMark: false,
  //     layout: 'vertical',
  //     labelAlign: 'right',

  //   },
  //   preview: true
  // }
  current: 1
})
const modalData = reactive({
  formData: {},
  configData: {
    title: '',
    palceholder: '',
    checkType: ''
  },
})

const showFooter = ref(true);

const getTitle = '流程详情';
const { adaptiveWidth } = useDrawerAdaptiveWidth();

// nodeDataList.list = flattenNodes(nodeValues)
// console.log('审核节点数据', nodeDataList.list);

const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {

  setDrawerProps({ confirmLoading: true });
  const { record } = data

  recordDetail.checkrecord = { ...record }
  console.log('单条审核记录', recordDetail);

  // recordDetail.checkNodeData = await getNodeById(record.nodeId)
  let nodes = await getFlowNodes('12345679')
  recordDetail.checkNodeList = flattenNodes(nodes)
  recordDetail.checkNodeList.map((i, j) => {
    let data = i
    // data.properties.sonType = SonTypeEnums[i.properties.sonType]
    if (i.properties.signType == 2) {
      data.properties.signType = '会签'
    }
    else {
      data.properties.signType = '或签'
    }
    data.type = NodeTypes1[i.type]
    if (i.properties.nodeId == record.nodeId) recordDetail.current = j

    console.log('节点数据', data);

    return data
  })

  setDrawerProps({ confirmLoading: false });
});

//获取标题
// const getTitle = computed(() => (!unref(isUpdate) ? '新增客户' : '编辑客户'));
//关闭抽屉
function handleSubmit() {
  closeDrawer()
}
// function handleDetail() {
//   let { record } = getContractDetail('1642781268024258562')
//   openModalDetail(record, true)
// }


</script>
<style lang="less" scoped>
.col-container1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  margin: 15px;

}

.col-container1 img {
  width: 50px;
  height: 50px;
}

.col-container1 span {
  position: absolute;
  top: 50px;
  left: 8px;
}

/* 设置col-container2为相对定位的容器 */
.col-container2 {
  margin: 15px;
  line-height: 2.6;
}

/deep/ .step ::after {
  content: "";
  border-bottom: 1px solid black;
  display: block;
  margin-top: 10px;
}

/deep/ .ant-steps-navigation.ant-steps-vertical>.ant-steps-item.ant-steps-item-active::before {
  top: 0;
  right: 0;
  left: unset;
  display: block;
  width: 3px;
  height: calc(100%);
}
</style>
